大家好，上週我們理解了 purescript 生出來的 hello world template 和稍為碰了一下 do notation。但這三十天既然是個 modern web 的題目，也該來 render 一下 HTML 了。

Purescript default 產的 template 只是個 console application，如果要把他變成一個 SPA 嗎，需要把 bundler 加進去。雖然我本來是打算從零開始自幹的，但由於現在離截稿只剩一小時⋯我決定要使用 template 啦!!

我們會使用 purescript-halogen-template。halogen 是一個蠻有名的 virtual-DOM based 的 frontend framework (跟 react 差不多)，也將會是這個題目主力學習的 framework。事不宜遲，馬上開始罷！

根據 README，我們把 repo clone 下來然後跑這堆 command:

> git clone https://github.com/purescript-halogen/purescript-halogen-template.git halogen-project
> cd halogen-project
> yarn
# 這句跑蠻久的 @.@
> yarn run build
> yarn run serve

一切順利的話，他會跑出一個網頁如下：

可以看到他是一個簡單的 Counter (筆者：欸我明天想做的事被做了)。

接下來把 button 的 "Click me" 改一下看看。打開 src/App/Button.purs，可以看到 22-30 行有 render 那個 button 的部份：

render :: forall cs m. State -> H.ComponentHTML Action cs m
render state =
  HH.div_
    [ HH.p_
        [ HH.text $ "You clicked " <> show state.count <> " times" ]
    , HH.button
        [ HE.onClick \_ -> Increment ]
        [ HH.text "Click me" ]
    ]

把 "Click me" 換成 "按我"，重跑 yarn run build，再 refresh 頁面就可以看到改變了。

到這裡也許你會覺得很麻煩，沒有 hot reload 嗎？有喔！停止 yarn run serve。先在一個 terminal 跑:

yarn run build --watch

再在一個新的 terminal 跑 yarn run serve，這樣 hot reload 應該就能動了。

明天我們會認真學習一下 halogen 這個 framework。